<template>
  <div>
    <div class="admin-box">
      <div class="admin_info">
        <i class="el-icon-s-custom" style="scale: 2; margin: 3vh 0"></i>
        <p>id_{{ user.id }}</p>
        <p>name_{{ user.name }}</p>
        <p>phone</p>
        <p>{{ user.phone }}</p>
      </div>

      <div class="admin-option">
        <el-button style="margin-right: 2vw;" @click="toHome">home</el-button>
        <el-button @click="clear">注销</el-button>
      </div>

      <div class="tab-box">
        <el-tabs type="border-card">
          <el-tab-pane label="视频审核" v-if="views[0]"><Videos /></el-tab-pane>
          <el-tab-pane label="评论管理" v-if="views[1]"><Comments /></el-tab-pane>
          <el-tab-pane label="用户管理" v-if="views[2]"><Users /></el-tab-pane>
          <el-tab-pane label="类别管理" v-if="views[3]"><Tags /></el-tab-pane>
          <el-tab-pane label="权限管理" v-if="views[4]"><Privileges /></el-tab-pane>
          <el-tab-pane label="管理员权限分配" v-if="views[5]"><PriAdmin /></el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import Tags from "@/components/admin/tags.vue";
import Privileges from "@/components/admin/privileges.vue";
import PriAdmin from "@/components/admin/priAdmin.vue";
import Videos from "@/components/admin/videos.vue";
import Users from "@/components/admin/users.vue";
import Comments from "@/components/admin/comments.vue";

import { mapGetters } from "vuex";
export default {
  data() {
    return {
      views: [false, false, false, false, false, false],
    };
  },
  components: {
    Tags,
    Privileges,
    PriAdmin,
    Videos,
    Users,
    Comments,
  },
  computed: {
    ...mapGetters(["user"]),
  },
  methods: {
    init() {
     
      this.user.privileges.map((item) => {
        console.log(item.id);
        // 根据权限id开放权限
        var idx =  ["1", "4", "2", "5", "6", "7"].indexOf(
            String(item.id)
          )
         if( idx != -1) {
          this.views[idx] = true ;
         }
      } )
    },
    toHome(){
      this.$router.push("/")
    } ,
    clear(){
      this.$store.commit('setUser', null);
      this.$store.commit('setIsAdmin', false);
      this.$router.push("/")
    }
  },
  created(){
    this.init()
  }
};
</script>

<style >
.admin-box {
  width: 100vw;
  height: 100vh;
  border: 1px solid #eee;
  border-radius: 1vw;
  box-shadow: 0px 1px 2px 3px #eee;
  background: url("/src/static/imgs/background.png") no-repeat center center;
  overflow-x: hidden;
}
.admin_info {
  position: absolute;
  top: 2vh;
  left: 1vw;
  width: 15%;
  height: 30%;
  background-color: rgb(18, 109, 212, 0.8);
  text-align: center;
  color: white;
  border-radius: 1vw;
}
.admin-option{
  position: absolute;
  top: 40vh;
  left: 1vw;

}
.tab-box {
  width: 80%;
  margin-left: 17%;
  margin-top: 3vh;
  border-radius: 1vw;
  overflow: hidden;
}
p {
  margin-bottom: 1vh;
}
</style>